<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影后台系统</title>
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="icon" href="../logo1.ico">
    <script src="../js/ajax.js"></script>
    <script src="../js/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(../img/bg6.jpg) no-repeat;
            background-size: cover;
            background-position: 0 -60px
        }
        .box {
            width: 320px;
            height: 400px;
            border-radius: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 200px auto 0;
            margin-right: 200px;
            text-align: center;
            position: relative;
            background-color: #fff;
            color: #00afffbf;
        }

        .box input {
            margin-bottom: 20px;
            height: 25px;
            width: 250px;
            border: 0;
            border-bottom: 1px solid #ccc;
            border-radius: 2px;
            color:#00afff;
            font-size: 14px;
            outline: none;
        }

        #eye {
            position: absolute;
            top: 176px;
            right: 45px;
            cursor: pointer;
            color:gray;
        }
        ::placeholder{
            color: #fff;
        }
        input[type="submit"],input[type="reset"]{
            background-color: skyblue;
            border: 1px solid #ccc;
            color: #fff;
            width: 161px;
            cursor: pointer;
            border-radius: 5px;
        }
        #check{
            margin-left: -12px;
        }
    </style>
</head>
<body>
    <div class="box">
        <form action="##">
            <h1 style="font-size: 28px;margin-bottom: 30px;font-family: 宋体;border-bottom: 1px solid #ccc;margin: 30px 20px;padding-bottom: 10px;font-weight: 400;" >管理员登录</h1>
             <span style="position: absolute;top:127px;right:298px"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
              </svg></span><input type="text" name="username" placeholder="请输入账号" style="margin-top: 10px;" id="username"><span style="color: green;opacity: 0;" id="i1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
              </svg></span><span style="color: red;opacity: 0;position: absolute;top: 125px;right: 28px;" id="a1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
              </svg></span><br>
             <input type="password" name="password" placeholder="请输入密码" id="password"><span style="position: absolute;top:175px;right:298px"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="bi bi-bag-check" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
              </svg></span><span id="eye"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                  </svg></span><span style="color: green;opacity: 0;" id="i2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                  </svg></span><span style="color: red;opacity: 0;position: absolute;top: 176px;right: 28px;" id="a2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                  </svg></span><br>
            <input type="text" placeholder="请输入验证码" id="check" style="width: 200px;margin-left: -66px;"><span id="checkCode" style="color: #00deff;cursor: pointer;position: absolute;top: 226px;right: 35px;">1234</span><br>
            <div ><div><div style="width: 12px;height:12px;border:1px solid;margin-left: 10px;" id="box1"></div></div><span style="position: absolute;top: 261px;left:28px;font-size: 14px;">记住密码</span><span style="color: green;position: relative;top: -16px;left: -143px;opacity: 0;pointer-events: none;" id="i3"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
              </svg></span></div>
            <input type="submit" value="登录"><input type="reset">
        </form>
    </div>
    <script src="../js/login.js"></script>
    <script>
        $(".box").hide().slideToggle(1000)
    </script>
</body>
</html>